; (function () {
  /**
  *
  *	作者	: 老可
  * 	日期	: 改：2015-10-13
  *	版本	: v1.6
  *	QQ  	: 279662403 群 246502174
  * 	兼容性  : IE6+ 
  *   ******* :1. 更改获取图片方式，以小图li为基础通过自定义属性data-lsrc和data-maxSrc来获取,
         2. 修复safari bug
  */

  var EventUtil, Get, Element;
  EventUtil = {
    addHandler: function (ele, type, handler) {
      if (ele.addEventListener) {
        ele.addEventListener(type, handler, false)
      } else if (ele.attachEvent) {
        ele.attachEvent("on" + type, handler)
      } else {
        ele["on" + type] = handler;
      }
    },
    removeHandler: function (element, type, handler) {
      if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
      } else if (element.detachEvent) {
        element.detachEvent("on" + type, handler);
      } else {
        element["on" + type] = null;
      }
    },
    getEvent: function (event) {
      return event ? event : window.event;
    },
    getTarget: function (event) {
      return event.target || event.srcElement;
    },
    preventDefault: function (event) {
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        event.returnValue = false;
      }
    },
    stopPropagation: function (event) {
      if (event.stopPropagation) {
        event.stopPropagation();
      } else {
        event.cancelBubble = true;
      }
    }
  };

  Get = {
    byId: function (id) {
      return typeof id === "string" ? document.getElementById(id) : id
    },
    byClass: function (sClass, oParent) {
      var aClass = [];
      var reClass = new RegExp("(^| )" + sClass + "( |$)");
      var aElem = this.byTagName("*", oParent);
      for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
      return aClass
    },
    byTagName: function (elem, obj) {
      return (obj || document).getElementsByTagName(elem)
    }
  };

  Element = {
    hasClass: function (obj, name) {
      return (' ' + obj.className + ' ').indexOf(' ' + name + ' ') > -1 ? true : false;
    },
    addClass: function (obj, name) {
      if (this.hasClass(obj, name)) return;
      obj.className += ' ' + name;
    },
    removeClass: function (obj, name) {
      obj.className = obj.className.replace(new RegExp('(^|\\s)' + name + '(?:\\s|$)'), '$1').replace(/\s{1,}/g, ' ');
    }
  }

  function MagnifierF() {
    this.init.apply(this, arguments);
  }

  MagnifierF.prototype = {
    init: function (id) {
      var _is = this;
      this.magWrap = Get.byId(id);
      this.magMain = this.magWrap.children[0];
      this.mW = this.magMain.offsetWidth;
      this.mH = this.magMain.offsetHeight;
      this.magImg = this.magMain.getElementsByTagName('img')[0];
      this.mImgSrc = this.magImg.getAttribute('data-src');

      this.specBox = Get.byClass("spec-items", this.magWrap)[0];
      this.specUl = this.specBox.getElementsByTagName('ul')[0];
      this.specItem = this.specBox.getElementsByTagName('li');


      _is.specFn();
      _is.setEventFn().dragEvent();



    },
    setEleFn: function () {
      var _is = this,
        _html1 = "",
        oFrag = document.createDocumentFragment(),
        oFrag2 = document.createDocumentFragment();

      if (_is.magMain.children[1]) {
        return;
      } else {
        _is.oMD = document.createElement('div');
        _is.oMD.className = "MagnifierDrag";
        _is.oMD.style.cssText = 'width:' + _is.mW / 2 + 'px;height:' + _is.mH / 2 + 'px;';
        _is.oMD.innerHTML = "&nbsp;";

        _is.oMP = document.createElement('div');
        _is.oMP.className = 'MagnifierPop';
        _is.oMP.style.cssText = 'width:' + _is.mW + 'px;height:' + _is.mH + 'px;right:' + (-_is.mW - 10) + 'px;';

        _is.oMI = document.createElement('div');
        _is.oMI.className = 'MagnifierImg';
        _is.oMI.style.cssText = 'width:' + _is.mW * 2 + 'px;height:' + _is.mH * 2 + 'px;';
        _html1 = '<img style="width:100%;height:100%;" src="' + _is.mImgSrc + '">'
        _is.oMI.innerHTML = _html1;

        _is.oMP.appendChild(_is.oMI)

        oFrag.appendChild(_is.oMD);
        oFrag2.appendChild(_is.oMP);

        _is.magMain.appendChild(oFrag);
        _is.magWrap.appendChild(oFrag2);

      }
    },
    removeFn: function (event) {
      var _is = this;
      var target = EventUtil.getTarget(event);

      if (target.nodeName == "IMG") {
        return;
      } else {
        _is.magMain.removeChild(_is.oMD);
        _is.magWrap.removeChild(_is.oMP);
      }
    },
    setMousemoveFn: function (event) {
      var _is = this,

        _WinScrLeft = document.documentElement.scrollLeft || document.body.scrollLeft,
        _WinScrTop = document.documentElement.scrollTop || document.body.scrollTop;

      _x = event.clientX + _WinScrLeft -
        (_is.magWrap.getBoundingClientRect().left + _WinScrLeft) - _is.oMD.offsetWidth / 2;

      _y = event.clientY + _WinScrTop -
        (_is.magMain.getBoundingClientRect().top + _WinScrTop) - _is.oMD.offsetHeight / 2;

      _l = _is.magMain.offsetWidth - _is.oMD.offsetWidth;
      _t = _is.magMain.offsetHeight - _is.oMD.offsetHeight;

      _l2 = - (_is.oMI.offsetWidth - _is.magMain.offsetWidth);
      _t2 = - (_is.oMI.offsetHeight - _is.magMain.offsetHeight);

      if (_x < 0) {
        _x = 0;
      }
      else if (_x > _l) {
        _x = _l;
      }

      if (_y < 0) {
        _y = 0;
      }
      else if (_y > _t) {
        _y = _t;
      }


      _is.oMD.style.left = _x + "px";
      _is.oMD.style.top = _y + "px";


      _bigx = _x / _l;
      _bigy = _y / _t;


      _is.oMI.style.left = _bigx * _l2 + "px";
      _is.oMI.style.top = _bigy * _t2 + "px";
    },
    setEventFn: function () {
      var _is = this,
        _x = 0,
        _y = 0,
        _l = 0,
        _t = 0,
        _bigx = 0,
        _bigy = 0,
        _l2 = 0,
        _t2 = 0;

      function handleEvent(event) {
        events = EventUtil.getEvent(event);
        switch (event.type) {
          case "mouseover":
            _is.setEleFn();
            break;
          case "mousemove":
            if (_is.oMD) {
              _is.setMousemoveFn(event);
            }
            break;
          case "mouseout":
            _is.removeFn(event);
            break;
        }

      }
      return {
        dragEvent: function () {

          EventUtil.addHandler(_is.magMain, "mouseover", handleEvent);
          EventUtil.addHandler(_is.magMain, "mousemove", handleEvent);
          EventUtil.addHandler(_is.magMain, "mouseout", handleEvent);
        }
      }

    },
    specFn: function () {
      var _is = this, _oSpImg, _oISrc, _oMaxSrc,
        oLBtn = Get.byClass("spe_leftBtn", _is.magWrap)[0],
        oRBtn = Get.byClass("spe_rightBtn", _is.magWrap)[0],
        oLiW = this.specUl.getElementsByTagName('li')[0].offsetWidth + 5,
        _len = _is.specItem.length,
        n = 0,
        l = null,
        r = null;

      function TabFn(event) {
        var target = EventUtil.getTarget(event),
          i = 0;

        if (target.nodeName != "UL") {

          if (target.nodeName == "IMG") {
            target = target.parentNode;
          }
          for (; i < _len; i++) {
            _is.specItem[i].className = '';
          }
          target.className = 'on';

          _oSpImg = target.getElementsByTagName('img')[0];
          _oISrc = _oSpImg.getAttribute('data-lsrc');
          _oMaxSrc = _oSpImg.getAttribute('data-maxSrc');

          //data-lsrc data-maxSrc
          _is.magImg.setAttribute('src', _oISrc);
          //_is.mImgSrc = _oMaxSrc;
          _is.magImg.setAttribute('data-src', _oMaxSrc);
          _is.mImgSrc = _is.magImg.getAttribute('data-src');
        }

      }
      EventUtil.addHandler(_is.specUl, "mouseover", TabFn);

      function moveFn(event) {
        var target = EventUtil.getTarget(event);

        if (target.className.indexOf("spe_rightBtn") > -1) {
          r = ++n;
          if (r > _len - 5)
            Element.removeClass(target, "on");

          if (r > _len - 4) {

            n = _len - 4;
            return false;
          } else {

            _is.buttur(_is.specUl, { left: -(r * oLiW) });
            Element.addClass(oLBtn, "on");
          }
        }
        if (target.className.indexOf("spe_leftBtn") > -1) {
          l = --n;
          if (l < 1)
            Element.removeClass(target, "on");

          if (l < 0) {

            n = 0;
            return false;
          } else {

            _is.buttur(_is.specUl, { left: -(l * oLiW) });
            Element.addClass(oRBtn, "on");
          }
        }
      }

      if (_len > 4) {

        Element.addClass(oRBtn, "on");
        EventUtil.addHandler(_is.magWrap, "click", moveFn);
      }



    },
    buttur: function (ele, obj) {

      window.clearTimeout(ele.timer);

      var _this = this,
        end = null;

      for (direc in obj) {

        var direc1 = direc.toLowerCase(),
          strOffset = "offset" + direc1.substr(0, 1).toUpperCase() + direc1.substring(1).toLowerCase(),
          target = obj[direc],
          nSpeed = (target - ele[strOffset]) / 8;

        nSpeed = nSpeed >= 0 ? Math.ceil(nSpeed) : Math.floor(nSpeed);
        ele.style[direc1] = ele[strOffset] + nSpeed + "px";
        end += nSpeed;

      }

      if (end)

        if (typeof fnCallback == "function") {
          fnCallback.call(ele);
        } else {

          ele.timer = window.setTimeout(function () {
            _this.buttur(ele, obj)
          }, 20);

        }
    }

  }

  window['MagnifierF'] = function (id) {
    return new MagnifierF(id);
  }

})()